<template>
    <div class="cartcontrol">
        <div class="cart-decrease icon-remove_circle_outline" 
        v-show="food.count>0" @click="removeCart"></div>
        <div class="count" v-show="food.count>0">{{food.count}}</div>
        <div class="cart-add icon-add_circle" @click="addCart()" ref="test"></div>
        
        <transition 
            @before-enter="beforeEnter" 
            @enter="enter" 
            @after-enter="afterEnter">
            <div class="ball" v-show="ballFlag"></div>
        </transition>
       
    </div>
</template>
<script>
import Vue from 'vue'
export default {
    props:['food'],
    data() {
        return {
            ballFlag:false
        }
    },
    methods: {
        addCart(event){
            this.ballFlag = !this.ballFlag
            if(!this.food.count){
                Vue.set(this.food,'count')
                this.food.count = 1
            }else{
                this.food.count++
            }
            //this.$emit('cart-add',event.target)
        },
        removeCart(){
            this.food.count--
          
        },
        
        beforeEnter(el){
            var ball = this.$refs.test//document.getElementById('test')//.getBoundingClientRect();
            el.style.left = ball.offsetLeft+'px';
            el.style.top = ball.offsetTop+'px';
            el.style.transform = "translate(0, 0)";
           // console.log(ball.offsetLeft+'---'+ball.offsetTop)
        },
        enter(el,done){
            //el.offsetWidth;
            //小球的位置
            const ballPosition = el.getBoundingClientRect();
            //徽标位置
            const badge = document.getElementById('badge').getBoundingClientRect();
            var left,top;
            left = badge.left-ballPosition.left;
            top = badge.top-ballPosition.top;
            el.style.transform=`translate(${left}px,${top}px)`;
            el.style.transition = 'all 1s cubic-bezier(.4,-0.3,1,.68)'
            done()
        },
        afterEnter(el){
           this.ballFlag = !this.ballFlag
        },
        
    }
}
</script>
<style lang="stylus" scoped>
@import '../../common/stylus/base.styl'
@import '../../common/stylus/mixin.styl'
@import '../../common/fonts/icon.css'
.cartcontrol
    font-size 0
    .count
        vertical-align top
        font-size 10px
        color rgb(147,153,159)
        line-height 24px
        width 12px
        padding-top 6px
        display inline-block
        text-align center
    .cart-add,.cart-decrease
        display inline-block
        font-size 24px
        color rgb(0,160,220)
        line-height 24px
        padding 6px
    .ball
        width: 15px
        height: 15px
        border-radius:50%
        background:red
        position:absolute
        z-index:1100
</style>

